let { table, $, form, layer, upload } = layui;
//默认导出
export default class Infos {
    constructor() {
        this.render();
        this.handle();
    }
    //渲染页面
    render() {
        let template = `
        <style>
        .add-picture{
            margin-left:110px;
            margin-bottom:50px;
           
        }
        .add-content{
            display:flex;
            flex-wrap:wrap;
            padding-left:110px;
        }
       
        </style>
            <table id="infosTable" lay-filter="infosTable"></table>
            <script type="text/html" id="tools">
            <form class="layui-form" lay-filter="searchForm">
                <div class="layui-input-inline">
                    <button type="button" class="layui-btn layui-btn-sm" lay-event="add">
                        <i class="layui-icon">&#xe654;</i>
                    </button>
                </div>
                <!-- type -->
                <div class="layui-input-inline type">
                <select name="type" >
                    <option value="title">标题</option>
                    <option value="createTime">发稿时间</option>
                    <option value="watches">已浏览人数</option>
                    <option value="content">评论</option>
                </select>
              </div>
              <!-- value -->
              <div class="layui-input-inline value">
                  <input type="text" name="value" placeholder="请输入搜索条件" class="layui-input">
              </div>
              <div class="layui-input-inline">
                  <button type="button" lay-event="search" class="layui-btn layui-btn-primary layui-btn-sm">
                      <i class="layui-icon">&#xe615;</i>
                  </button>
              </div>
              </div>
            </form>
        </script>
    
        <script type="text/html" id="infosBar">
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </script>
        `;
        $("#content").html(template);//将表格渲染到页面
    }
    //渲染js
    handle() {
        let imgs = '';
        //渲染表格
        table.render({
            elem: '#infosTable'
            , height: 312
            , url: '/infoses' //数据接口
            , page: true //开启分页

            //用于对分页请求的参数
            , request: {
                pageName: 'current' //页码的参数名称，默认：page
                , limitName: 'pageSize' //每页数据量的参数名，默认：limit
            }
            , parseData: function (res) { //res 即为原始返回的数据
                console.log("res:", res);
                return {
                    "code": 0,//解析接口状态
                    "count": res.total, //解析数据长度
                    "data": res.rows //解析数据列表
                };
            }
            // ,limit:10//每页显示的条数，默认为10
            , limits: [3, 5, 10, 15, 20]//可以选择每页显示多少条
            , toolbar: "#tools"//toolbar - 绑定工具条模板 //数据表格->头工具栏事件
            , cols: [[ //表头
                { field: 'title', title: '标题' }
                , { field: 'createTime', title: '发稿时间' }
                , { field: 'content', title: '评论' }
                , { field: 'imgs', title: '配图' }
                , { fixed: 'right', width: 150, align: 'center', toolbar: '#infosBar' }
            ]]
        });
        //新增资讯
        table.on('toolbar(infosTable)', function (obj) {
            if (obj.event == "add") {//点击增加按钮
                //弹出层
                layer.open({
                    type: 1,//页面层
                    title: '新增资讯',
                    btn: ["确定新增", "取消"],
                    area: ['600px', '400px'],
                    //确定回调函数
                    yes: function (index) {
                        //获取表单内容
                        console.log(form.val('addForm'));//给表单赋值的方法
                        $.ajax({
                            type: "post",
                            url: "/infoses",//路由的路径里面的新增路径
                            data: {//传的请求内容
                                imgs, //imags不是表单，所以声明一个变量，一起添加到数据库
                                ...form.val('addForm')//只能获取表单的内容 .val()方法主要用于获取表单元素的值，比如 input, select 和 textarea
                            },
                            success() {//success指的是请求并成功返回信息
                                table.reload("infosTable");//新增完直接就能渲染到表格中
                                layer.close(index);//关闭
                            }
                        });
                    },
                    //上传文件图片用 upload模块
                    success() {
                        $('#img').click(function () {//点击新增配图
                            let template = `
                                <style>
                                    #addImg{
                                        width:50px;
                                        height:70px;
                                        border:1px solid black;
                                    }
                                    .formStyle{
                                        width:300px;
                                        margin-right:150px;
                                        margin-top:10px;
            
                                    }
                                </style>

                                <form class="layui-form formStyle"  lay-filter="addForm">
                                    <div class="layui-form-item">
                                    <label class="layui-form-label">配图</label>
                                    <div class="layui-input-block">
                                        <button type="button" class="layui-btn" id="addUploadBtn">
                                            <i class="layui-icon">&#xe67c;</i>上传图片
                                        </button>
                                        <img id="addImg" src="" alt="" />
                                    </div>
                                    </div>
                                </form>
                            `;

                            $("#imgText").append(template);//子节点添加

                            $("#addUploadBtn").click(function () {//点击上传图片
                            });
                            // 渲染上传组件，点击事件要放在新增图文上，才有照片显示，因为是先点击得新增图文得框框
                            upload.render({
                                elem: '#addUploadBtn' //绑定元素
                                , url: '/upload' //上传接口
                                , done: function (res) {
                                    //上传完毕回调imgs
                                    console.log("res:", res);
                                    imgs = res.filename;//文件类型imgs
                                    console.log(res.filename);
                                    $("#addImg").attr("src", "/images/" + res.filename);//设置src配置后面的images的路径拼接，public下面的路径"/images/"
                                    form.render();
                                }
                                , error: function () {
                                    //请求异常回调
                                }
                            });
                            $("#img").unbind();

                        });

                        //新增评论
                        $("#contentTxt").click(function () {
                            let template = `
                                <style>
                                    .formStyleTxt{
                                        width:400px;
                                        margin-top:20px;
                                    }
                                </style>

                                <form class="layui-form"  lay-filter="addForm">
                                    <div class="layui-form-item layui-form-text formStyleTxt">
                                        <label class="layui-form-label">评论</label>
                                        <div class="layui-input-block">
                                        <textarea name="content" placeholder="请输入内容" class="layui-textarea"></textarea>
                                        </div>
                                    </div>
                                </form>
                            `;
                            $("#contentText").append(template);//子节
                            $('#contentTxt').unbind();
                        });
                    },

                    //新增表单框
                    content: `
                        <form class="layui-form"  lay-filter="addForm">
                        <div class="layui-form-item">
                            <label class="layui-form-label">标题</label>
                            <div class="layui-input-block">
                              <input type="text" name="title" required lay-verify="required" placeholder="请输入标题"
                              autocomplete="off" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-form-item">
                             <label class="layui-form-label">发稿时间</label>
                            <div class="layui-input-block">
                            <input type="text" name="createTime" required lay-verify="required" placeholder="请输入发稿时间"
                                autocomplete="off" class="layui-input">
                            </div>
                        </div>

                       
                        <div class="layui-input-inline add-picture">
                            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" lay-event="addBtn" id="img">
                                <i class="layui-icon">&#xe654;新增配图</i>
                            </button>
                            <div id="imgText"></div>
                        </div>

                        <div class="layui-input-inline add-content">
                            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" lay-event="addBtn" id="contentTxt">
                                <i class="layui-icon">&#xe654;新增评论</i>
                            </button>
                            <div id="contentText"></div>
                        </div>
                        </form>
                        `
                });
                //按照搜素条件查询
            } else if (obj.event == "search") {
                //表格重载，刷新
                table.reload('infosTable', {
                    where: form.val('searchForm'),
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
            }
        });
        //删除事件
        table.on('tool(infosTable)', function (obj) {
            console.log("obj:", obj);
            if (obj.event == "del") {
                layer.confirm('确定删除?', function (index) {
                    $.ajax({
                        type: "delete",
                        url: "/infoses/" + obj.data._id,//obj.data;获得当前行数据的 具体某一行的id
                        //响应成功
                        success() {
                            table.reload('infosTable');//删除之后刷新页面，表格重载方法
                            layer.close(index);
                        }
                    });

                });
                //编辑修改
            } else if (obj.event == "edit") {

                layer.open({
                    type: 1,
                    title: '修改资讯信息',
                    btn: ['确定修改', '取消'],
                    area: ['600px', '400px'],
                    //确定回调函数
                    yes: function (index) {
                        $.ajax({
                            type: "put",
                            url: "/infoses/" + obj.data._id,
                            //数据在后台修改成功，但是不能显示在页面上，这里运用扩展运算符
                            data: {

                                ...form.val('updateForm')//扩展运算符，赋值
                            },
                            success() {
                                table.reload("infosTable");
                                layer.close(index);
                            }
                        });

                    },
                    //按照id去查询要修改的人，并且回填到表单里面去
                    success: function () {//success指的是请求并成功返回信息
                        //ajax再次发送请求
                        $.ajax({
                            type: "get",
                            url: "/infoses/" + obj.data._id,
                            success(res) {
                                console.log("res:", res);
                                form.val('updateForm', res);//表单取值
                                
                            }
                        });
                       
                        $('#img').click(function () {//点击新增配图
                            let template = `
                                <style>
                                    #addImg{
                                        width:50px;
                                        height:70px;
                                        border:1px solid black;
                                    }
                                    .formStyle{
                                        width:300px;
                                        margin-right:150px;
                                        margin-top:10px;
            
                                    }
                                </style>

                                <form class="layui-form formStyle"  lay-filter="updateForm">
                                    <div class="layui-form-item">
                                    <label class="layui-form-label">配图</label>
                                    <div class="layui-input-block">
                                        <button type="button" class="layui-btn" id="addUploadBtn">
                                            <i class="layui-icon">&#xe67c;</i>上传图片
                                        </button>
                                        <img id="addImg" src="" alt="" />
                                    </div>
                                    </div>
                                </form>
                            `;

                            $("#imgText").append(template);//子节点添加

                            $("#addUploadBtn").click(function () {//点击上传图片
                            });
                            // 渲染上传组件，点击事件要放在新增图文上，才有照片显示，因为是先点击得新增图文得框框
                            upload.render({
                                elem: '#addUploadBtn' //绑定元素
                                , url: '/upload' //上传接口
                                , done: function (res) {
                                    //上传完毕回调imgs
                                    console.log("res:", res);

                                    imgs = res.filename;//文件类型imgs
                                    console.log(res.filename);
                                    $("#addImg").attr("src", "/images/" + res.filename);//设置src配置后面的images的路径拼接，public下面的路径"/images/"
                                    form.render();
                                }
                                , error: function () {
                                    //请求异常回调
                                }
                            });
                            $("#img").unbind();


                        });

                        //评论
                        $("#contentTxt").click(function () {
                            let template = `
                                <style>
                                    .formStyleTxt{
                                        width:400px;
                                        margin-top:20px;
                                    }
                                </style>

                                <form class="layui-form"  lay-filter="updateForm">
                                    <div class="layui-form-item layui-form-text formStyleTxt">
                                        <label class="layui-form-label">评论</label>
                                        <div class="layui-input-block">
                                        <textarea name="content" placeholder="请输入内容" class="layui-textarea"></textarea>
                                        </div>
                                    </div>
                                </form>
                            `;
                            $("#contentText").append(template);//子节
                            $('#contentTxt').unbind();
                        });

                    },

                    content: `
                    <form class="layui-form"  lay-filter="updateForm">
                        <div class="layui-form-item">
                            <label class="layui-form-label">标题</label>
                            <div class="layui-input-block">
                            <input type="text" name="title" required lay-verify="required" placeholder="请输入修改标题"
                            autocomplete="off" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">发稿时间</label>
                            <div class="layui-input-block">
                            <input type="text" name="createTime" required lay-verify="required" placeholder="请输入修改发稿时间"
                                autocomplete="off" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-input-inline add-picture">
                        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" lay-event="addBtn" id="img">
                            <i class="layui-icon">&#xe654;新增配图</i>
                        </button>
                        <div id="imgText"></div>
                        </div>

                        <div class="layui-input-inline add-content">
                        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" lay-event="addBtn" id="contentTxt">
                            <i class="layui-icon">&#xe654;新增评论</i>
                        </button>
                        <div id="contentText"></div>
                        </div>
                    </form>
                    `
                });
            }

        });

    }
}


